<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card shadow="hover" class="mgb20" style="height: 300px">
					<div class="user-info">
						<el-avatar :size="120" :src="imgurl" />
						<div class="user-info-cont">
							<div class="user-info-name">{{ name }}</div>
							<div><el-tag round>{{ role }}</el-tag></div>
						</div>
					</div>
					<div class="user-info-list" style="margin-bottom: 20px">
            <el-icon><Clock /></el-icon>
						上次登录时间：
						<span style="margin-left: 0">{{CurLocation.time }}</span>
					</div>
					<div class="user-info-list">
            <el-icon><Location /></el-icon>
						当前登录地点：
						<span style="margin-left: 0">{{CurLocation.local}}</span>
					</div>
				</el-card>


				<el-card shadow="hover" style="height: 500px">
					<template #header>
						<div class="clearfix">
							<span>小说种类占比</span>
						</div>

					</template>
          <el-table :data="StaticData" border class="table" ref="multipleTable" header-cell-class-name="table-header" height="400">
            <el-table-column prop="Name" label="Tag" width="80" align="center"></el-table-column>
            <el-table-column prop="Cnt" label="数量" width="70" align="center"></el-table-column>
            <el-table-column prop="Per" label="占比" width="300" align="center">
              <template #default="scope">
                <el-progress :percentage=scope.row.Per :color=color16()></el-progress>
              </template>
            </el-table-column>
          </el-table>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon"><User /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num" >{{Count.user}}</div>
									<div>总用户量</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon"><Notebook /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ Count.book }}</div>
									<div>小说数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon"><Collection /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ Count.chapter }}</div>
									<div>总章节数</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card shadow="hover" style="height: 600px">
					<template #header>
						<div class="clearfix">
							<span><el-icon><EditPen /></el-icon>  待办事项</span>
							<el-button  style="float: right; padding: 3px 0" text @click="dialogFormVisible = true" type="primary" >添加</el-button>
						</div>
            <el-dialog v-model="dialogFormVisible" title="添加待办事项" center width="300px" >
              <el-form :model="toDoForm">
                <el-form-item label="标题" >
                  <el-input v-model="toDoForm.title" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addTodo">
                  确认
                </el-button>
              </span>
              </template>
            </el-dialog>
					</template>

					<el-table :show-header="false" :data="TODO" style="width: 100%" height="500">
						<el-table-column width="40">
							<template #default="scope">
								<el-checkbox v-model="scope.row.status" @click="changeTODO(scope.row.id)"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column >
							<template #default="scope">
								<div
									class="todo-item"
									:class="{
										'todo-item-del': scope.row.status
									}"
								>
									{{ scope.row.title }}
								</div>
							</template>
						</el-table-column >
            <el-table-column width="100%">
              <template #default="scope">
              <el-button type="danger" :icon="Delete" circle  @click="delTodo(scope.row.id)"/>
              </template>
            </el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>


	</div>
</template>

<script setup lang="ts" name="dashboard">
import {onMounted, reactive, ref} from 'vue';
import imgurl from '../assets/img/ava.jpg';
import {BookStatic, CurIp, fetchCount, GetToDoList, changeToDoList, DelTodo, AddTodo} from '../api';
const name = localStorage.getItem('ms_username');
import {
  Delete,
} from "@element-plus/icons-vue"
import {ElMessage} from "element-plus";
const role: string = name === 'admin' ? '超级管理员' : '普通用户';
let Count = reactive<any>({user:0,book:0,chapter:0})
let dialogFormVisible = ref(false)
const toDoForm = reactive({
  title:"",
})
interface StaticItem {
  name: string;
  value: number;
}
interface ToDoList{
  id:string
  title:string
  status:boolean
}
const StaticData = ref<StaticItem[]>([]);
const TODO = ref<ToDoList[]>([])
let CurLocation  = reactive<any>({local:"",IP:"",time:""})
const delTodo = (id:string) =>{
  console.log("删除的id")
  console.log(id)
  DelTodo(id).then(res =>{
    ElMessage.success("删除成功！")
    GetToDo()
  })
}
const addTodo = () => {
  if (toDoForm.title.length == 0){
    ElMessage.warning("不能为空！")
    return
  }
  AddTodo(toDoForm.title).then((res: any) =>{
    console.log("添加")
    console.log(res)
    GetToDo()
    toDoForm.title = ""
    dialogFormVisible.value = false;
    console.log(toDoForm)
  })
  //业务代码
  console.log(toDoForm)

}
const changeTODO = (id:string)=>{
  console.log(id)
  changeToDoList(id).then(res =>{
    GetToDo()
  })

}

const GetToDo = ()=>{
  console.log("请求了")
  GetToDoList().then(res =>{
    TODO.value = res.data.data
  })
}
onMounted(()=>{
  // 总体数据
  fetchCount().then(res =>{
    Count.user = res.data.data[0]
    Count.book = res.data.data[1]
    Count.chapter = res.data.data[2]
  })
  //书籍数据
  BookStatic().then(res=>{
    StaticData.value = res.data.data
  })
  CurIp().then(res =>{
    CurLocation.local = res.data.country+ " - " +res.data.province+ " - "+ res.data.city+ " - " + res.data.area
    console.log(res)
    CurLocation.IP = res.data.ip
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth() >= 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
    const date = now.getDate() >= 10 ? now.getDate() : `0${now.getDate()}`
    const hour = now.getHours() >= 10 ? now.getHours() : `0${now.getHours()}`
    const minutes = now.getMinutes() >= 10 ? now.getMinutes() : `0${now.getMinutes()}`
    const seconds = now.getSeconds() >= 10 ? now.getSeconds() : `0${now.getSeconds()}`
    CurLocation.time = `${year}年${month}月${date}日 ${hour}:${minutes}:${seconds}`
  })
  GetToDo()
  setInterval(GetToDo,60000);
})

function color16(){//十六进制颜色随机
  var r = Math.floor(Math.random()*256);
  var g = Math.floor(Math.random()*256);
  var b = Math.floor(Math.random()*256);
  var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
  return color;
}
</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}

.grid-con-icon {
	font-size: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
	background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
	color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
	background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 30px;
	color: #222;
}

.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	text-decoration: line-through;
	color: #999;
}

.schart {
	width: 100%;
	height: 300px;
}
</style>
